<template>
  <uni-collapse-item :show-arrow="false" title-border="none" :open="open">
    <slot></slot>
    <template #title>
      <view class="uni-collapse-item-title">
        <text>{{ title }}</text>
        <image :src="`/static/images/team-or-group/icon-${suffix}.png`" />
      </view>
    </template>
  </uni-collapse-item>
</template>
<script>
export default {
  props: {
    title: String,
    index:String,
    indexList:{
      type:Array,
      default:()=>[]
    },
    open: {
      type: Boolean,
      default: true
    }
  },
  computed:{
    suffix(){
      return this.indexList.includes(this.index) ? 'up' : 'down'
    }
  }
}
</script>
<style lang="scss" scoped>
.uni-collapse-item-title {
  background: rgb(245, 245, 245);
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  image{
    width: 34rpx;
    height: 34rpx;
  }
}
</style>